<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品列表</title>
    <link rel="stylesheet" href="./css/list.css">
    <link rel="stylesheet" href="./css/iconfont.css">
    <link rel="stylesheet" href="./css/iconfont-2.css">
</head>
<body>
    <div class="head1">
        <div class="he">
            <ul class="he2">
                <li><a href="./logon.html">登录</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;</li>
                <li>&nbsp;<a href="./regst.html">免费注册</a>&nbsp;</li>
                <li>&nbsp;<a href="">关于我们<span class="iconfont2 icon-jiantou1"></span></a></span></li>
                <li>&nbsp;<a href="">下载APP<span class="iconfont2 icon-jiantou1"></span></a>&nbsp;</li>
                <li>&nbsp;<a href="">帮助中心</a>&nbsp;</li>
                <li>&nbsp;<a href=""><span class="iconfont2 icon-xin"></span>收藏</a></li>
            </ul>
        </div>
    </div>


    <div class="head2">
        <div class="box">
            <a href="" class="logo"><img src="./img/logo.png"></a>
            <div class="box2">
                <div class="box3">
                    <p class="zi">搜索所有商品</p>
                </div>
                <a href="" class="like"><img src="./img/search-btn.png" alt=""></a>
            </div>
            
            <a href="./cart.html" class="cle">购物车</a>
           
            <div class="r">
                <p>订购热线</p>
                <h2>400-9993-513</h2> 
            </div>
        </div>
    </div>

    <div class="nav">
        <div class="nav2">
            <div class="qb">全部商品分类</div>
            <ul class="list">
                <li><a href="index.html">首页</a></li>
                <li>金骏眉</li>
                <li>大红袍</li>
                <li>铁观音</li>
                <li>龙井</li>
                <li>茶具</li>
                <li>茶师亲制</li>
                <li>茶币商城</li>
                <li>词条部落</li>
            </ul>
        </div>
    </div>

    <div class="cont">
    </div>

    <div class="goot_wk">
        <div class="foot">
            <div class="foot1">
                <ul class="foot_wk">
                    <li>关于我们 <span> / </span> &nbsp;</li>
                    <li> 配送政策 <span> / </span> &nbsp;</li>
                    <li> 招才纳贤 <span> / </span> &nbsp;</li>
                    <li> 帮助中心 <span> / </span> &nbsp;</li>
                    <li> 联系我们 <span> / </span> &nbsp;</li>
                    <li> 招商加盟 <span> / </span> &nbsp;</li>
                    <li> 网站地图 <span> / </span> &nbsp;</li>
                    <li> 词条部落</li>
                </ul><br>
                <p>Copyright 2016, 茶七网 TEA7.COM</p>
                <p>增值电信业务经营许可证 : B1.B2-20160011 &nbsp;&nbsp;&nbsp; 闽CP备14011677号-2</p>
                <p>服务时间 : 08:30-21:00 &nbsp;客服热线:400-9993-513（温馨提示 : 请您核对无误后拨出，谢谢！）</p>
                <span><img src="https://rr.knet.cn/static/images/logo/cnnic.png" alt=""></span>
                <span><img src="./img/cert.png" alt=""></span>
            </div>
            <div class="foot2">
                <div class="bos2">
                    <img src="./img/guanzhu_weixin_90.jpg" class="imgbos2">
                    <p><img src="./img/weixin.png" class="imgbos1"></p>
                    <p class="imgbos3">扫描关注微信公众号</p>
                </div>
                <div class="bos2">
                    <img src="./img/erweima.jpg" class="imgbos2">
                    <p class="imgbos4">APP</p>
                    <p class="imgbos3">扫描关注微信公众号</p>
                </div>
            </div>
        </div>
    </div>
    
</body>
</html>
<script>

var data = [{
        pic:"http://img.tea7.com/0128697_0.jpeg?x-oss-process=image/resize,w_300",
        price:"198",
        name:"礼盒装-金骏眉-红色时光250g（含提袋）",
        goodsId:"123asd"
    },{
        pic:"http://img.tea7.com/0093503_0.jpeg?x-oss-process=image/resize,w_300",
        price:"99",
        name:"工作茶首选 金骏眉口粮茶 1号250g",
        goodsId:"ajgjgj"
    },{
        pic:"http://img.tea7.com/0126611_0.jpeg?x-oss-process=image/resize,w_300",
        price:"99",
        name:"高级岩茶 武夷山原产地大红袍 2号160g",
        goodsId:"12u3"
    },{
        pic:"http://img.tea7.com/0125761_0.png?x-oss-process=image/resize,w_300",
        price:"429",
        name:"匠人茶-张回春-陈年老茶32g(含提袋)",
        goodsId:"afa876"
    },{
        pic:"http://img.tea7.com/0012978_0.jpeg?x-oss-process=image/resize,w_300",
        price:"128",
        name:"浓香型 铁观音2号 250克 消青工艺",
        goodsId:"2as5dw"
    },{
        pic:"http://img.tea7.com/0127087_0.jpeg?x-oss-process=image/resize,w_300",
        price:"99",
        name:"铁观音-茶师-林丁旺果香铁观音96g",
        goodsId:"q1454s"
    },{
        pic:"http://img.tea7.com/0096746_0.jpeg?x-oss-process=image/resize,w_300",
        price:"128",
        name:"名茶之首 绿茶  远致龙井3号 150g 清爽甘醇",
        goodsId:"4ad1w1"
    },{
        pic:"http://img.tea7.com/0130735_0.png?x-oss-process=image/resize,w_300",
        price:"158",
        name:"茶师计划-王建波蜜兰香金骏眉100g（含提袋）",
        goodsId:"4pd1w1"
    },{
        pic:"http://img.tea7.com/0121006_0.jpeg?x-oss-process=image/resize,w_300",
        price:"198",
        name:"礼盒装-金骏眉-红色有缘之礼小罐装180g",
        goodsId:"4ds1w1"
    },{
        pic:"http://img.tea7.com/0130733_0.png?x-oss-process=image/resize,w_300",
        price:"128",
        name:"绿茶  一芯壹叶龙井  250g",
        goodsId:"a1465d"
    },{
        pic:"http://img.tea7.com/0011920_0.jpeg?x-oss-process=image/resize,w_300",
        price:"128",
        name:"紫砂壶-紫泥-掇球壶1号 190cc",
        goodsId:"14ad15"
    },{
        pic:"http://img.tea7.com/0013042_0.jpeg?x-oss-process=image/resize,w_300",
        price:"128",
        name:"宜兴手工紫砂-紫泥-西施壶1号 245cc",
        goodsId:"a145dw"
    }];




    class GoodsList{
        constructor(){
            this.data = data;
            this.cont = document.querySelector(".cont");
        }
        init(){
            var str = "";
            for(var i=0;i<this.data.length;i++){
                str += `
                        <div class="goods" index="${this.data[i].goodsId}">
                            <a href="details.html" id="xq">
                                <img src="${this.data[i].pic}" alt="">
                                <span class="mn">${this.data[i].price}</span>
                                <p class="jj">${this.data[i].name}</p>
                            </a>
                            <input type="button" value="加入购物车" class="add">
                        </div>
                        `
            }
            this.cont.innerHTML = str;
        }
        addEvent(){
            var that = this;
            this.cont.onclick = function(eve){
                var e = eve || window.event;
                var tar = e.target || e.srcElement;
                if(tar.className === "add"){
                    that.goodsId = tar.parentNode.getAttribute("index");
                    that.setData();
                }
            }
        }
        setData(){
            var gm = localStorage.getItem("goodsMsg");
            if(gm === null){
                gm = [{
                    goodsId:this.goodsId,
                    num:1,
                    msg:this.getData(this.goodsId)
                }];
            }else{ 
                gm = JSON.parse(gm);
                var zhuangtai = 0;
                for(var i=0;i<gm.length;i++){
                    if(gm[i].goodsId === this.goodsId){
                        gm[i].num++;
                        zhuangtai = 1;
                        break;
                    }
                }
                if(zhuangtai == 0){
                    gm.push({
                        goodsId:this.goodsId,
                        num:1,
                        msg:this.getData(this.goodsId)
                    })
                }
            }
            localStorage.setItem("goodsMsg",JSON.stringify(gm));
        }
        getData(id){
            for(var i=0;i<this.data.length;i++){
                if(this.data[i].goodsId === id){
                    return this.data[i];
                }
            }
            return {};
        }
    }

    var gl = new GoodsList();
    gl.init();
    gl.addEvent();
</script>